<template>
  <div class="head-box">
    <!-- 标题行 -->
    <div class="app-head-bgm">
      <div class="app-head">
        <!-- 流光效果 -->
        <div style="display: flex;justify-content: space-between;position: absolute;width: 100%;margin-top: 2.5rem;">
          <div class="streamer-effect">
            <span class="streamer"></span>
          </div>
          <div class="streamer_effect2">
            <span class="streamer2"></span>
          </div>
        </div>
        <!-- 电流效果 -->
        <div style="display: flex;justify-content: space-between;position: absolute;width: 100%;">
          <div style="width: 100%;margin-top: 1.9rem;">
            <div class="current-effect"></div>
          </div>
          <div style="width: 100%;margin-top: 1.9rem;">
            <div class="current-effect2"></div>
          </div>
        </div>
        <!-- 闪烁菱形 -->
        <div class="app-head-lx">
          <div class="s-s-l-x">
            <div style="display: flex;">
              <div class="lingxing-l-4"></div>
              <div class="lingxing-l-3"></div>
              <div class="lingxing-l-2"></div>
              <div class="lingxing-l-1"></div>
            </div>
            <div style="display: flex;">
              <div class="lingxing-r-1"></div>
              <div class="lingxing-r-2"></div>
              <div class="lingxing-r-3"></div>
              <div class="lingxing-r-4"></div>
            </div>
          </div>
        </div>
        <!-- 闪烁小点 -->
        <div class="app-head-spot">
          <div style="display: flex;justify-content: space-between;width: 100%;">
            <div style="display: flex;justify-content: space-between;margin-top: 1.66vh;width: 27vw;">
              <div class="s-l-box"></div>
              <div class="s-l-box"></div>
              <div class="s-l-box"></div>
            </div>
            <div style="display: flex;justify-content: space-between;margin-top: 1.66vh;width: 27vw;">
              <div class="s-l-box"></div>
              <div class="s-l-box"></div>
              <div class="s-l-box"></div>
            </div>
          </div>
        </div>
        <!-- 当前时间 -->
        <div class="app-head-time">
          <div>{{ i18n.fy.当前项目 }}：<span style="color:#88a0cb;font-weight: bold;">
              {{ bsStore.project.projectName }}</span>
          </div>
          <div>{{ i18n.fy.currenttime }}：{{ currentTime }}</div>
        </div>
        <div class="app-head-text masked">智慧照明管理平台</div>
      </div>
    </div>
    <!-- 菜单层 -->
    <div class="app-head-btn">
      <div style="display: flex;justify-content: space-between;">
        <!-- v-show="userid === 272" -->
        <div class="btn-box" @click="toShowroom3d()">
          <div class="a-h-img-4 a-h-i-size">
          </div>
          <div class="btn-text">{{ i18n.fy.二维展厅 }}</div>
        </div>
      </div>
      <div style="display: flex;">
        <div class="btn-box" @click="selectProject()">
          <div class="a-h-img-1 a-h-i-size">
          </div>
          <div class="btn-text">{{ i18n.fy.projectselection }}</div>
        </div>
        <div class="btn-box" @click="toWorkBench()">
          <div class="a-h-img-2 a-h-i-size">
          </div>
          <div class="btn-text">{{ i18n.fy.workbench }}</div>
        </div>
        <div class="btn-box" @click="logoutUser()">
          <div class="a-h-img-3 a-h-i-size">
          </div>
          <div class="btn-text">{{ bsStore.userData.loginname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
import { useBigScreenStore } from "@/pinia/bigScreen"
const bsStore = useBigScreenStore();
import { useRouter } from "vue-router";
const router = useRouter()
const emits = defineEmits(['onClckBtn'])

let intervalId = null
const time = new Date(new Date().getTime()); //对象
const year = time.getFullYear(); // 年
const month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
const date = time.getDate().toString().padStart(2, '0'); // 日
const currentTime = ref(new Date().toLocaleTimeString());
const userid = ref('')
let nums = 1
const updateTime = () => {
  currentTime.value = year + "-" + month + "-" + date + " " + new Date().toLocaleTimeString()
  nums++
  if (nums > 30) {
    nums = 1
    // 60秒移除一次排名率缓存
    localStorage.removeItem('big_RankingChart_all')
  }
};

// 跳转后台
const toWorkBench = () => {
  router.push('/workbench')
}
// 项目选择弹窗
const selectProject = () => {
  emits('onClckBtn')
}
// 二维展厅
const toShowroom3d = () => {
  router.push('/showroom3d')
}
// 用户注销
const logoutUser = () => {
  let str = `您确定要退出智慧照明管理平台吗?`
  let tis = `温馨提示:当前管理员账号为【${bsStore.userData.loginname}】`
  ElMessageBox.confirm(str, tis, { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(() => {
      $axios.post('/sel/logout', {}).then(res => {
        // 清理loca缓存
        window.localStorage.clear();
        // 清理vuex缓存
        window.location.reload();
      })
    })
    .catch((e) => { console.log(e); })
}

onMounted(async () => {
  intervalId = setInterval(updateTime, 1000);
  userid.value = JSON.parse(localStorage.getItem('info')).userid
})

onUnmounted(() => {
  clearInterval(intervalId)
});
</script>

<style lang="scss" scoped>
.head-box {
  width: 100%;
  position: absolute;
  z-index: 10;

  .app-head-bgm {
    background: #000e13 !important;
  }

  .app-head {
    background: url(/src/assets/wbe4/b_bg_1.png) no-repeat center center;
    background-size: 100% 100%;
    height: 6.2rem;
    position: relative;
  }

  .app-head-lx {
    width: 100%;
    position: absolute;
    margin-top: 2.5rem;
  }

  .app-head-time {
    color: #fff;
    font-size: 16px;
    position: absolute;
    margin-top: 3.2rem;
    display: flex;
    justify-content: space-between;
    width: 99.5%;
    user-select: none;
    line-height: 20px;
  }

  .app-head-spot {
    width: 100%;
    position: absolute;
    margin-top: 1.78vh;
  }

  .app-head-text {
    font-size: clamp(12px, 48px, 3vw);
    // font-size: 2.5rem;
    letter-spacing: 8px;
    user-select: none;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 5rem;
  }


  .s-s-l-x {
    display: flex;
    justify-content: space-around;
    padding: 0px 19.8vw;
  }

  .masked {
    background-clip: text;
    background-size: 200% 100%;
    animation: masked-animation 3s infinite linear;
  }

  @keyframes masked-animation {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: -100% 0;
    }
  }

  .app-head-btn {
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 36px;
    text-align: -webkit-right;
    position: absolute;
    display: flex;
    justify-content: flex-end;

    .a-h-img-1 {
      width: 110px;
      background: url(/src/assets/wbe4/a-h-img-1-1-1.png) no-repeat center center;
      background-size: 100% 100%;
      background-color: #0c3350;
    }

    .a-h-img-2 {
      width: 110px;
      background: url(/src/assets/wbe4/a-h-img-2-2.png) no-repeat center center;
      background-size: 100% 100%;
      background-color: #0c3350;
    }

    .a-h-img-3 {
      background: url(/src/assets/wbe4/a-h-img-3-3-3.png) no-repeat center center;
      background-size: cover;
      cursor: pointer;
    }

    .a-h-img-4 {
      // src\assets\icon\3d\3d-icon.png
      background: url(/src/assets/icon/3d/3d-icon.png) no-repeat center center;
      background-size: cover;
      cursor: pointer;
    }


    .btn-box {
      display: flex;
      border: solid 1px #1b6387;
      margin-right: 0.5vw;
      border-radius: 10%;
      height: 26px;
      margin-top: 5px;
      background-color: #0c3350;
      cursor: pointer;
    }

    .a-h-i-size {
      width: 25px;
      height: 25px;
      margin: 0px 2px;
      background-color: #0c3350;
    }

    .btn-box:hover {
      background-color: #364249;

      .btn-text {
        color: rgb(203, 205, 224);
      }
    }

    .btn-text {
      color: #fff;
      font-size: 14px;
      user-select: none;
      text-align: center;
      margin-right: 10px;
      line-height: 28px;
    }
  }

  .s-l-box {
    width: 5px;
    height: 7px;
    background-color: #fff;
    animation: namedcolors 1.5s infinite alternate;
    border-radius: 2px;

    @keyframes namedcolors {
      0% {
        background-color: #fff;
      }

      20% {
        background-color: #fff;
      }

      40% {
        background-color: #fff;
      }

      60% {
        background-color: #fff;
      }

      80% {
        background-color: #eff3f7;
      }

      100% {
        background-color: #002336;
      }
    }
  }

  .lingxing-l-1 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-l-2 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-l-3 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-l-4 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-l-1::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(65deg);
    background-color: #fff;
    animation: shanshuo1 0.8s infinite alternate
  }

  .lingxing-l-2::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(65deg);
    background-color: #fff;
    animation: shanshuo2 0.8s infinite alternate
  }

  .lingxing-l-3::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(65deg);
    background-color: #fff;
    animation: shanshuo3 0.8s infinite alternate
  }

  .lingxing-l-4::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(65deg);
    background-color: #fff;
    animation: shanshuo4 0.8s infinite alternate
  }


  .lingxing-r-1 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-r-1::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(115deg);
    background-color: #fff;
    animation: shanshuo1 1.5s infinite alternate
  }

  .lingxing-r-2 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-r-2::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(115deg);
    background-color: #fff;
    animation: shanshuo2 1.5s infinite alternate
  }

  .lingxing-r-3 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-r-3::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(115deg);
    background-color: #fff;
    animation: shanshuo3 1.5s infinite alternate
  }

  .lingxing-r-4 {
    width: 18px;
    height: 18px;
    position: relative;
    transform-origin: bottom left;
    overflow: hidden;
  }

  .lingxing-r-4::before {
    content: "";
    display: block;
    padding-top: 100%;
    transform: skewY(115deg);
    background-color: #fff;
    animation: shanshuo4 1.5s infinite alternate
  }

  @keyframes shanshuo1 {
    0% {
      background-color: #fff;
    }

    100% {
      background-color: #31aeed;
    }
  }

  @keyframes shanshuo2 {
    0% {
      background-color: #fff;
    }

    100% {
      background-color: #2793c9;
    }
  }

  @keyframes shanshuo3 {
    0% {
      background-color: #fff;
    }

    100% {
      background-color: #186992;
    }
  }

  @keyframes shanshuo4 {
    0% {
      background-color: #fff;
    }

    100% {
      background-color: #0e4e6f;
    }
  }

  // 电流
  .current-effect {
    width: 54%;
    height: 1rem;
    background: url(/src/assets/icon/bgtm.png);
    position: relative;
    overflow: hidden;
  }

  .current-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/src/assets/icon/dl-16-2.png);
    animation: flow 10s linear infinite;
    // opacity: 0.8;
  }

  .current-effect2 {
    width: 100%;
    height: 1rem;
    background: url(/src/assets/icon/bgtm.png);
    position: relative;
    overflow: hidden;
  }

  .current-effect2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 46%;
    right: 0;
    bottom: 0;
    background: url(/src/assets/icon/dl-16-2.png);
    animation: flow 10s linear infinite;
    // opacity: 0.8;
  }

  @keyframes flow {
    0% {
      background-position: 0 0;
      opacity: 0.5;
    }

    50% {
      background-position: 50% 0;
      opacity: 1;
    }

    100% {
      background-position: 100% 0;
      opacity: 0.5;
    }
  }

  .streamer-effect {
    width: 100%;
  }

  .streamer {
    position: absolute;
    display: block;
  }

  .streamer:nth-child(1) {
    filter: hue-rotate(0deg);
    top: 0;
    left: 0;
    width: 8rem;
    height: 0.15rem;
    background: linear-gradient(90deg, transparent, #fff);
    animation: animate1 2s linear infinite;
  }

  @keyframes animate1 {
    0% {
      left: -15%;
    }

    50% {
      left: 5%;
    }

    80% {
      left: 15%;
    }

    100% {
      left: 30%;
    }
  }

  .streamer_effect2 {
    width: 100%;
    right: 0;
  }

  .streamer2 {
    position: absolute;
    display: block;
  }

  .streamer2:nth-child(1) {
    filter: hue-rotate(0deg);
    top: 0;
    left: 100%;
    width: 8rem;
    height: 0.15rem;
    background: linear-gradient(90deg, transparent, #fff);
    animation: animate2 2s linear infinite;
  }

  @keyframes animate2 {
    0% {
      left: 70%;
    }

    50% {
      left: 88%;
    }

    100% {
      left: 100%;
    }
  }
}
</style>
